<!-- 客户列表选择组件 -->
<template>
    <div>
        <el-autocomplete style="width: 100%;" v-model="selectedValue" :fetch-suggestions="querySearch" value-key="mobile"
            label="mobile" placeholder="请输入内容" @select="handleSelect" @change="change">
            <!-- 自定义显示模板 -->
            <template slot-scope="{ item }">
                <div class="flex">
                    <div class="name e-flex-1">{{ item.name }}</div>
                    <span class="mobile" style="color: #8492a6; font-size: 13px">{{ item.mobile }}</span>
                </div>
            </template>
        </el-autocomplete>
    </div>
</template>

<script>
    export default {
        props: {
            value: {
                type: [Number, String, Array],
                default: null
            },
            type:{
                type: [Number, String],
                default: 0, //0全部 1未绑定客户组的用户 2绑定客户组的用户
            },
            isALL: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                selectList: [],
                selectedValue: this.value // 使用本地 data 属性来保存选中的值
            }
        },
        watch: {
            value: {
                immediate: true,
                handler(newVal) {
                    this.selectedValue = newVal; // 监听外部变化以保持同步
                }
            }
        },
        mounted() {
            // this.getselectList()
        },
        methods: {
            async querySearch(queryString, cb) {
                // 假设这是你的原始数据
                const data = await this.getselectList(queryString);

                const results = queryString
                    ? data.filter(item => {
                        const nameMatch = item.name.toLowerCase().includes(queryString.toLowerCase());
                        const mobileMatch = item.mobile.includes(queryString);
                        return nameMatch || mobileMatch;
                    })
                    : data;

                // 转换数据格式为 { value: '显示值', item: 原始对象 }
                // const formattedResults = results.map(item => ({
                //     value: `${item.name}(${item.mobile})`, // 显示格式
                //     item // 保留原始数据
                // }));

                cb(results);
            },
            handleSelect(item) {
                console.log('handleSelect', item);
                this.$emit('select',item)
                this.$emit('input', this.selectedValue);
                // this.$emit('change',item)
                // this.$emit('input',item.userid)
            },
            getselectList(key = ''){
                return this.$axios.post('/User/List',{
                    PageIndex: 1,
                    PageSize: 10,
                    type: this.type,
                    isALL: this.isALL,
                    key:key || ""
                }).then((res) => {
                    
                    this.selectList = res.rows;
                    return res.rows
                }).catch((err) => {
                    
                })
            },
            // remoteMethod(query) {
            //     if (query !== '') {
            //         this.getselectList(query)
            //     } else {
            //         this.selectList = [];
            //     }
            // },
            // clear(){
            //     this.change()
            // },
            change(){
                this.$emit('change', this.selectedValue); // 触发 change 事件传递新值
            }
        }
    }
</script>